<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Canavas 标签定义图形，比如图表和其他图像，通常是通过脚本来
        完成的(JavaSciprt)
     -->
     <canvas id="myCanvas" width="200px" height="100px"
     style="border: 1px solid #000;">
    </canvas>
    <p>用的照片是</p>
    <img id="pricture" src="./void深渊神里4k_c9a2f.jpg" alt="" width="200px" height="100px">
    <!-- 创建一个canvas画布 并指定大小 border是画边框线-->
    <!-- 写入脚本 -->
    <!-- canvas只是创建了一个画布，并不能在画布里边进行绘图，所以
    需要借助脚本完成
    -->
    <!-- <script>
        // 找到canvas元素
        var c=document.getElementById("myCanvas");
        // 创建context对象 该对象为内建的HTML5对象，
        var ctx=c.getContext("2d");
        // 以下为绘制一个红色的矩阵
        ctx.fillStyle="#FF0000";
        // fillRect(x,y,width,height)
        ctx.fillRect(25,12.5,150,75)
    </script> -->

    <!-- 在Canvas上画线，我们使用的是一下两种办法
    1、moveTo(x,y)定义线条开始坐标
    2、lineTo(x,y)定义线条结束坐标
    -->
    <!-- <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);//起始位置
        ctx.lineTo(200,100);//终止位置
        ctx.stroke();
    </script> -->
    <!-- 在Canvas上绘制圆形 arc(x,y,r,start,stop)来绘制-->
    <!-- <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);
        ctx.stroke();
    </script> -->
    <!-- 在Canvas上绘制文本 
    1、font 定义字体
    2、fillText(text,x,y) 在canvas上绘制实心的文本
    3、strokeText(text,x,y)在canvas上绘制空心的文本
    -->
    <!-- <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.font="30px 楷体";
        ctx.fillText("你好",10,50);
    </script> -->
    <!-- <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.font="30px 楷体";
        ctx.strokeText("你好",10,50);
    </script> -->
    <!-- 创建Canvas渐变
    渐变可以填充在矩阵，圆形，线条，文本等
    addColorStop()方法指定颜色停止
    createLinearGradient(x,y,x1,y1)创建一个线条渐变
    createRadialGradient(x,y,r,x1,y1,r1)创建一个圆渐变
    -->

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        //创建渐变
        var grd=ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white")
        //填充渐变
        
        ctx.fillStyle=grd;
        ctx.fillRect(25,12.5,150,75)
        // 字体颜色的渐变
        // ctx.font="50px 楷体";
        // ctx.fillText("你好",10,50)
    </script>
    <!-- 在画布内插入图片
    drawImage(image,x,y),需要知道图片的大小
    -->
    <!-- <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=document.getElementById("pricture");
        img.onload=function(){
            ctx.drawImage(pricture,5,5);
        }
    </script> -->
</body>
</html>